<template>
  <a-space direction="vertical" fill>
    <UploadFile ref="refUploadFile" v-model:fileList="fileList" />
  </a-space>
  <!-- request Content-Type isn't multipart/form-data -->
</template>

<script lang="ts" setup>
import { cloneDeep } from "lodash";
import { ref, reactive, computed, onMounted, watch } from "vue";
import UploadFile from "./components/Upload.vue";

const emit = defineEmits(["update:values", "setUpload"]);
const props = withDefaults(
  defineProps<{
    props: any;
    name?: string;
    required?: boolean;
    disabled?: boolean;
    values: any;
    regex?: {
      [name: string]: {
        role: any;
        name: any;
      };
    };
  }>(),
  {}
);

const isShow = ref(false);
const isDownload = ref(false);

let fileList = computed({
  get() {
    return props.props.data[0]
      ? [
          {
            fileUrl: props.props.data[0].fileAddr,
            fileName: props.props.data[0].name,
          },
        ]
      : [];
  },
  set(val: any[]) {
    const newProps: any = cloneDeep(props.props);
    if (val[0]) {
      newProps.data[0] = { addr: "", name: "", fileAddr: "" };
      newProps.data[0].addr = val[0].sourceAddr;
      newProps.data[0].name = val[0].fileName;
      newProps.data[0].fileAddr = val[0].fileUrl;
      emit("setUpload", newProps);
    } else {
      newProps.data = [];
      emit("setUpload", newProps);
    }
  },
});

// const Download = async () => {
//   await FileDownload({ ...fileData.value });
// };
</script>

<style scoped lang="less">
.uploadFile {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  padding: 8px 10px 8px 12px;
  overflow: hidden;
  font-size: 14px;
  background-color: var(--color-fill-1);
  border-radius: var(--border-radius-small);
  transition: background-color 0.1s cubic-bezier(0, 0, 1, 1);
  // margin-top: 10px;
}
</style>
